<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		ul,
		li {
			list-style: none;
		}

		img {
			display: block;
			/*vertical-align: middle;*/
		}


		.clearFix:after {
			content: '';
			display: table;
			clear: both;
		}

		#box {
			position: relative;
			width: 600px;
			height: 300px;
			margin: 50px auto;
			/* overflow: hidden; */
		}

		#box .list {
			position: absolute;
			width: 3000px;
			height: 300px;
		}

		#box .list li {
			float: left;
			width: 600px;
			height: 300px;
		}

		#box .list li img {
			width: 600px;
			height: 300px;
		}


		#box span {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 50px;
			height: 100px;
			background-color: rgba(200, 200, 200, .7);
			font-size: 50px;
			text-align: center;
			line-height: 100px;
			color: white;
			opacity: 0;
			transition: opacity 2s;
		}

		#box .left {
			left: 0;
		}

		#box .right {
			right: 0;
		}

		#box .iconList {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10px;
			overflow: hidden;
		}

		#box .iconList li {
			float: left;
			width: 40px;
			height: 40px;
			margin-right: 10px;
			border-radius: 50%;
			background-color: gray;
		}

		#box .iconList li.current {
			background-color: red;
		}
	</style>
</head>

<body>
	<div id="box">
		<ul class="list">
			<li><img src="img/1.jpg" /></li>
			<li><img src="img/2.jpg" /></li>
			<li><img src="img/3.jpg" /></li>
			<li><img src="img/4.jpg" /></li>
			<li><img src="img/5.jpg" /></li>
		</ul>

		<span class="left">
			< </span>
				<span class="right"> > </span>


				<ul class="iconList">
					<li class="current"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
	</div>

	<script type="text/javascript">
		var box = document.querySelector('#box');

		var span_list = document.querySelectorAll('span');

		box.onmouseover = function () {
			span_list[0].style.opacity = .8;
			span_list[1].style.opacity = .8;
		}

		box.onmouseout = function () {
			span_list[0].style.opacity = 0;
			span_list[1].style.opacity = 0;
		}

			// 需求：
			// var list = document.querySelector('.list');

			// function move(flag){
			// 	var startX = list.offsetLeft;
			// 	var step;
			// 	if(flag){
			// 		step = -600;
			// 	}else{
			// 		step = 600;
			// 	}
			// 	var endX = startX + step;
			// 	list.style.left = endX + 'px';
			// }

			// （1）右侧瞬变
			// span_list[1].onclick = function(){
				// var startX = list.offsetLeft;
				// var step = -600;
				// var endX = startX + step;
				// list.style.left = endX + 'px';
				// move(true);
			// }

		// （2）左侧瞬变
		// span_list[0].onclick = function(){
		// var startX = list.offsetLeft;
		// var step = 600;
		// var endX = startX + step;
		// list.style.left = endX + 'px';
		// 	move(false)
		// }
		// （3）瞬变的封装


		var list = document.querySelector('.list');
		// （4）右侧渐变

		span_list[1].onclick = function () {

			var startX = list.offsetLeft;
			var move_dis = -600;
			var lastX = startX + move_dis;


			var timer = setInterval(function () {
				var startX = list.offsetLeft;
				var step = -30;
				var endX = startX + step;

				if(endX == lastX){
					clearInterval(timer)
				}

				list.style.left = endX + 'px';
			}, 30);

		}



			// （5）左侧渐变
			// （6）渐变的封装
			// （7）无限轮播
			// （8）图片联动小圆点
			// （9）小圆点联动图片
			// （10）自动轮播
			// （11）移入悬停 移出继续
			// （12）定时器叠加
	</script>
</body>

</html>